<template>
  <view>
    <view class="bg-content">
      <image class="bg-img" :src="coverUrl" mode=""></image>
      <view v-for="(item, index) in titleList" :key="index" class="title-box" :style="[generateStyleObject(item)]">
        <text :style="{ lineHeight: item.fontSize + 'rpx', textAlign: item.isAlignCenter ? 'center' : 'left' }">{{ item.title }}</text>
      </view>
    </view>
    <view class="all-box">
      <view class="all-top">
        <view class="left-scroll">
          <view @click="changeTitle(item, index)" :class="index === titlecur ? 'act' : ''" class="left-item" v-for="(item, index) in titleList" :key="index">
            标题{{ index + 1 }}
            <image @click.stop="deltitle(item, index)" v-show="titleList.length > 1" class="delicon" src="/static/icon/deltitle.png" mode=""></image>
          </view>
        </view>
        <view class="add-box" @click="addtitle()"> <image style="width: 30rpx; height: 30rpx; margin-right: 10rpx" src="/static/icon/addTitle.png" mode=""></image> 标题 </view>
      </view>
      <view class="opt-box zl-flex">
        <view class="zl-flex">
          <view @click="edit()" class="zl-flex-col zl-col-center zl-m-r-50">
            <image style="width: 50rpx; height: 50rpx" src="/static/icon/fontedit.png" mode=""></image>
            <view class="zl-m-t-12 zl-color-white zl-font-26"> 编辑 </view>
          </view>
          <view @click="size()" class="zl-flex-col zl-col-center zl-m-r-50">
            <image style="width: 50rpx; height: 50rpx" src="/static/icon/fontSize.png" mode=""></image>
            <view class="zl-m-t-12 zl-color-white zl-font-26"> 字号 </view>
          </view>
          <view @click="style()" class="zl-flex-col zl-col-center zl-m-r-50">
            <image style="width: 50rpx; height: 50rpx" src="/static/icon/fontcolor.png" mode=""></image>
            <view class="zl-m-t-12 zl-color-white zl-font-26"> 样式 </view>
          </view>
          <view @click="location()" class="zl-flex-col zl-col-center zl-m-r-50">
            <image style="width: 50rpx; height: 50rpx" src="/static/icon/fontlocation.png" mode=""></image>
            <view class="zl-m-t-12 zl-color-white zl-font-26"> 位置 </view>
          </view>
          <view @click="time()" class="zl-flex-col zl-col-center">
            <image style="width: 50rpx; height: 50rpx" src="/static/icon/fonttime.png" mode=""></image>
            <view class="zl-m-t-12 zl-color-white zl-font-26"> 时长 </view>
          </view>
        </view>
        <view @click="submit()" class="save-btn zl-m-l-60"> 保存 </view>
      </view>
    </view>
    <!-- 编辑标题弹框 -->
    <uni-popup background-color="#242424" ref="editpop" type="bottom" border-radius="20rpx 20rpx 0 0">
      <view class="pop-box">
        <view class="pop-top zl-flex zl-row-between">
          <view class="video_poo_title">标题{{ titlecur + 1 }}文案</view>
          <image @click="$refs.editpop.close()" style="width: 30rpx; height: 30rpx" src="/static/icon/popclose2.png" mode="widthFix"> </image>
        </view>
        <view class="pop-content">
          <textarea v-model="editobj.title" maxlength="20" class="textarea2" placeholder-style="color:#666;fontSize:28rpx" placeholder="请输入您的标题文案"></textarea>
          <view class="zl-p-l-30 zl-font-28 zl-m-t-26" style="color: #e53f3a"> 暂不支持emoji表情字符，例如：💰 </view>
          <view class="surebtn" @click="sureEdit()"> 确定 </view>
        </view>
      </view>
    </uni-popup>
    <!-- 字号弹框 -->
    <uni-popup background-color="#242424" ref="Sizepop" type="bottom" border-radius="20rpx 20rpx 0 0">
      <view class="pop-box">
        <view class="pop-top zl-flex zl-row-between">
          <view class="video_poo_title">标题{{ titlecur + 1 }}字号</view>
          <image @click="$refs.Sizepop.close()" style="width: 30rpx; height: 30rpx" src="/static/icon/popclose2.png" mode="widthFix"> </image>
        </view>
        <view class="pop-content">
          <view class="zl-flex zl-p-l-30 zl-p-r-30">
            <text class="zl-font-30 zl-color-white zl-m-r-40">字体大小</text>
            <uni-number-box :step="step" @change="sizechange" :value="editobj.fontSize" background="#393A3C" color="#fff" />
          </view>
          <view class="zl-flex zl-p-l-30 zl-p-r-30 zl-m-t-30">
            <text class="zl-font-30 zl-color-white">字体选择</text>
          </view>
          <view class="zl-flex zl-p-l-30 zl-p-r-30">
            <text class="zl-font-26 zl-color-EB5E00">(因文件过大，该页面不显示效果，成片会使用对应字体)</text>
          </view>
          <view class="font-box zl-flex">
            <view class="font-item zl-flex zl-row-center zl-color-white" @click="editobj.fontId = 0" :class="editobj.fontId === 0 ? 'actstyle' : ''"> 随机 </view>
            <view class="font-item zl-flex zl-row-center" @click="editobj.fontId = item.fontId" :class="item.fontId === editobj.fontId ? 'actstyle' : ''" v-for="item in fontList" :key="item.fontId">
              <image :src="item.coverUrl" mode=""></image>
            </view>
          </view>
          <view class="surebtn zl-m-t-80" @click="sureSizepop()"> 确定 </view>
        </view>
      </view>
    </uni-popup>
    <!-- 位置弹框 -->
    <uni-popup background-color="#242424" ref="locationpop" type="bottom" border-radius="20rpx 20rpx 0 0">
      <view class="pop-box">
        <view class="pop-top zl-flex zl-row-between">
          <view class="video_poo_title">标题{{ titlecur + 1 }}位置</view>
          <image @click="$refs.locationpop.close()" style="width: 30rpx; height: 30rpx" src="/static/icon/popclose2.png" mode="widthFix"> </image>
        </view>
        <view class="pop-content">
          <view class="zl-flex zl-p-l-30 zl-p-r-30">
            <text class="zl-font-30 zl-color-white zl-m-r-40">是否居中</text>
            <switch style="transform: scale(0.7)" color="#5AC259" @change="isAlignCenterChange" :checked="editobj.isAlignCenter"></switch>
          </view>
          <view v-show="!editobj.isAlignCenter" class="zl-flex zl-m-t-40 zl-p-l-30 zl-p-r-30">
            <text class="zl-font-30 zl-color-white zl-m-r-40">距离左侧</text>
            <uni-number-box :step="step" @change="leftchange" :value="editobj.x" background="#393A3C" color="#fff" />
            <text class="zl-font-30 zl-color-white zl-m-l-10">%</text>
          </view>
          <view class="zl-flex zl-p-l-30 zl-p-r-30 zl-m-t-40">
            <text class="zl-font-30 zl-color-white zl-m-r-40">距离顶部</text>
            <uni-number-box :step="step" @change="topchange" :value="editobj.y" background="#393A3C" color="#fff" />
            <text class="zl-font-30 zl-color-white zl-m-l-10">%</text>
          </view>
          <view class="surebtn zl-m-t-80" @click="surelocation()"> 确定 </view>
        </view>
      </view>
    </uni-popup>
    <!-- 时长弹框 -->
    <uni-popup background-color="#242424" ref="timepop" type="bottom" border-radius="20rpx 20rpx 0 0">
      <view class="pop-box">
        <view class="pop-top zl-flex zl-row-between">
          <view class="video_poo_title">标题{{ titlecur + 1 }}显示时长</view>
          <image @click="$refs.timepop.close()" style="width: 30rpx; height: 30rpx" src="/static/icon/popclose2.png" mode="widthFix"> </image>
        </view>
        <view class="pop-content">
          <view class="zl-flex zl-p-l-30 zl-p-r-30">
            <text class="zl-font-30 zl-color-white zl-m-r-40">标题时长</text>
            <view class="zl-flex">
              <view @click="editobj.isTiming = false" class="timechoose zl-m-r-30" :class="editobj.isTiming ? '' : 'acttime'"> 一直显示 </view>
              <view @click="editobj.isTiming = true" class="timechoose" :class="editobj.isTiming ? 'acttime' : ''"> 自定义 </view>
            </view>
          </view>
          <view v-show="editobj.isTiming" class="zl-flex zl-m-t-40 zl-p-l-30 zl-p-r-30">
            <text class="zl-font-30 zl-color-white zl-m-r-40">时长（秒）</text>
            <uni-number-box :step="step" @change="timechange" :value="editobj.time" background="#393A3C" color="#fff" />
          </view>
          <view class="surebtn zl-m-t-80" @click="suretime()"> 确定 </view>
        </view>
      </view>
    </uni-popup>
    <!-- 样式弹框 -->
    <uni-popup background-color="#242424" ref="stylepop" type="bottom" border-radius="20rpx 20rpx 0 0">
      <view class="pop-box">
        <view class="pop-top zl-flex zl-row-between">
          <view class="video_poo_title">标题{{ titlecur + 1 }}样式</view>
          <image @click="$refs.stylepop.close()" style="width: 30rpx; height: 30rpx" src="/static/icon/popclose2.png" mode="widthFix"> </image>
        </view>
        <view class="pop-content">
          <view class="" style="overflow-x: scroll">
            <view class="stylechoose-box zl-flex">
              <image @click="changeStyle(item, index)" :class="index === stylecur ? 'actstyle' : ''" v-for="(item, index) in styleList" :key="index" class="zl-m-r-20 styleImg" style="width: 72rpx; height: 72rpx; display: inline-block" :src="item.icon" mode=""> </image>
            </view>
          </view>
          <view class="zl-flex" style="padding: 26rpx 30rpx">
            <view @click="optcur = 0" class="style-opt" :class="optcur == 0 ? 'style-act' : ''"> 颜色 </view>
            <view @click="optcur = 1" class="style-opt" :class="optcur == 1 ? 'style-act' : ''"> 描边 </view>
            <view @click="optcur = 2" class="style-opt" :class="optcur == 2 ? 'style-act' : ''"> 背景 </view>
          </view>
          <view class="" style="overflow-x: scroll">
            <view class="color-box">
              <image
                @click="
                  editobj.outlineColor = ''
                  editobj.outline = 0
                "
                v-show="optcur === 1"
                :class="editobj.outlineColor == '' ? 'chooseNo' : 'noLine'"
                class="no_round"
                src="/static/textstyle/no.png"
                mode=""></image>
              <image
                @click="
                  editobj.bordColor = ''
                  editobj.bord = 0
                  editobj.radius = 0
                "
                v-show="optcur === 2"
                :class="editobj.bordColor == '' ? 'chooseNo' : 'noLine'"
                class="no_round"
                src="/static/textstyle/no.png"
                mode=""></image>
              <view @click="changeColor(item)" :style="{ background: item }" class="color-item" v-for="(item, index) in colorList" :key="index">
                <view v-if="(optcur === 0 && editobj.color == item) || (optcur === 1 && editobj.outlineColor == item) || (optcur === 2 && editobj.bordColor == item)" :style="{ border: item === '#FFFFFF' ? '4rpx solid #000' : '4rpx solid #fff' }" class="mini-box"> </view>
              </view>
            </view>
          </view>
          <view class="zl-flex">
            <view v-show="optcur === 1" class="zl-flex zl-p-l-30 zl-p-r-30 zl-m-t-36">
              <text class="zl-font-30 zl-color-white zl-m-r-40">粗细</text>
              <uni-number-box :step="1" :disabled="!editobj.outlineColor" @change="Strokechange" :value="editobj.outline" background="#393A3C" color="#fff" />
            </view>
            <view v-show="optcur === 2" class="zl-flex zl-p-l-30 zl-p-r-30 zl-m-t-36">
              <text class="zl-font-30 zl-color-white zl-m-r-40">内距</text>
              <uni-number-box :step="step" :disabled="!editobj.bordColor" @change="bordchange" :value="editobj.bord" background="#393A3C" color="#fff" />
            </view>
            <view v-show="optcur === 2" class="zl-flex zl-p-l-30 zl-p-r-30 zl-m-t-36">
              <text class="zl-font-30 zl-color-white zl-m-r-40">圆角</text>
              <uni-number-box :step="step" :disabled="!editobj.bordColor" @change="radiuschange" :value="editobj.radius" background="#393A3C" color="#fff" />
            </view>
          </view>
          <view class="surebtn zl-m-t-80" @click="surestyle()"> 确定 </view>
        </view>
      </view>
    </uni-popup>
  </view>
</template>
<script>
export default {
  data() {
    return {
      step: 2,
      titlecur: 0,
      titleList: [
        {
          fontSize: 46,
          color: '#000000',
          outlineColor: '',
          outline: 0,
          bord: 16,
          radius: 16,
          bordColor: '#FFDE00',
          isAlignCenter: true,
          x: 2,
          y: 8,
          fontId: 0,
          title: '这是标题',
          isTiming: false,
          time: 2
        }
      ],
      optcur: 0,
      editobj: {},
      styleList: [
        {
          icon: require('@/static/textstyle/no.png'),
          color: '#FFFFFF',
          outlineColor: '',
          outline: 0,
          bord: 0,
          radius: 0,
          bordColor: '#FFDE00',
          fontId: 0,
          title: '请编辑您的标题'
        },
        {
          icon: require('@/static/textstyle/1.png'),
          color: '#000000',
          outlineColor: '',
          outline: 0,
          bord: 16,
          radius: 16,
          bordColor: '#FFDE00',
          fontId: 0,
          title: '请编辑您的标题'
        },
        {
          icon: require('@/static/textstyle/2.png'),
          color: '#000000',
          outlineColor: '',
          outline: 0,
          bord: 16,
          radius: 16,
          bordColor: '#FFFFFF',
          fontId: 0,
          title: '请编辑您的标题'
        },
        {
          icon: require('@/static/textstyle/3.png'),
          color: '#FFFFFF',
          outlineColor: '',
          outline: 0,
          bord: 16,
          radius: 16,
          bordColor: '#FF2321',
          fontId: 0,
          title: '请编辑您的标题'
        },
        {
          icon: require('@/static/textstyle/4.png'),
          color: '#FFFFFF',
          outlineColor: '',
          outline: 0,
          bord: 16,
          radius: 16,
          bordColor: '#7D72F9',
          fontId: 0,
          title: '请编辑您的标题'
        },
        {
          icon: require('@/static/textstyle/5.png'),
          color: '#FFFFFF',
          outlineColor: '#000000',
          outline: 4,
          bord: 0,
          radius: 0,
          bordColor: '',
          fontId: 0,
          title: '请编辑您的标题'
        },
        {
          icon: require('@/static/textstyle/6.png'),
          color: '#000000',
          outlineColor: '#FFFFFF',
          outline: 4,
          bord: 0,
          radius: 0,
          bordColor: '',
          fontId: 0,
          title: '请编辑您的标题'
        },
        {
          icon: require('@/static/textstyle/7.png'),
          color: '#FFFFFF',
          outlineColor: '#FF2321',
          outline: 4,
          bord: 0,
          radius: 0,
          bordColor: '',
          fontId: 0,
          title: '请编辑您的标题'
        },
        {
          icon: require('@/static/textstyle/8.png'),
          color: '#FFDE00',
          outlineColor: '#000000',
          outline: 4,
          bord: 0,
          radius: 0,
          bordColor: '',
          fontId: 0,
          title: '请编辑您的标题'
        }
      ],
      colorList: ['#FFFFFF', '#000000', '#FFDE00', '#FF2321', '#FDC07D', '#7D72F9'],
      stylecur: 1,
      optcur: 0,
      coverUrl: 'https://oop-zl-ice.oss-cn-hangzhou.aliyuncs.com/app_static/zh/oth_tit.png',
      fontList: []
    }
  },
  onLoad(opt) {
    console.log(getApp().globalData.temp_titles)
    if (getApp().globalData.temp_titles.length > 0) {
      this.titleList = getApp().globalData.temp_titles
    }
    if (this.titleList.length > 0) {
      this.editobj = this.titleList[0]
    }
    if (getApp().globalData.temp_coverUrl) {
      this.coverUrl = getApp().globalData.temp_coverUrl
    }
    this.getFont()
  },
  onUnload() {
    getApp().globalData.temp_titles = []
  },
  methods: {
    getFont() {
      this.api.mate
        .getfontlist()
        .then((res) => {
          if (res.code === 0) {
            this.fontList = res.data
          } else {
            this.$util.msg(res.msg)
          }
        })
        .catch((err) => {
          this.$util.msg('请检查网络连接！')
        })
    },
    generateStyleObject(item) {
      return {
        'text-shadow': this.generateTextShadow(item),
        color: item.color,
        'font-size': item.fontSize + 'rpx',
        padding: item.bord + 'rpx',
        background: item.bord > 0 ? item.bordColor : '',
        top: item.y * 13.33 - item.bord + 'rpx',
        left: item.isAlignCenter ? '50%' : item.x + '%',
        transform: item.isAlignCenter ? 'translateX(-50%)' : 'translateX(0)',
        'border-radius': item.bord > 0 ? item.radius + 'rpx' : '0rpx'
      }
    },
    generateTextShadow(item) {
      const shadow = item.outline
      const color = item.outlineColor
      return item.outline === 0 ? '0' : `${shadow}rpx 0 ${color}, -${shadow}rpx 0 ${color}, 0 ${shadow}rpx ${color}, 0 -${shadow}rpx ${color}, ${shadow}rpx ${shadow}rpx ${color}, -${shadow}rpx -${shadow}rpx ${color}, ${shadow}rpx -${shadow}rpx ${color}, -${shadow}rpx ${shadow}rpx ${color}`
    },
    changeTitle(item, index) {
      this.editobj = this.titleList[index]
      this.titlecur = index
      console.log(this.editobj)
    },
    deltitle(item, index) {
      uni.showModal({
        title: '温馨提示',
        content: '您确定要删除该标题吗？',
        success: (res) => {
          if (res.confirm) {
            this.titleList.splice(index, 1)
            this.titlecur = 0
          }
        }
      })
    },
    addtitle() {
      if (this.titleList.length < 5) {
        this.titleList.push({
          fontSize: 46,
          color: '#000000',
          outlineColor: '#FFFFFF',
          outline: 0,
          bord: 16,
          radius: 16,
          bordColor: '#FFDE00',
          isAlignCenter: true,
          x: 0,
          y: (this.titleList.length + 1) * 8,
          fontId: 0,
          title: '请编辑您的标题',
          isTiming: false,
          time: 2
        })
        this.titlecur++
        this.editobj = this.titleList[this.titlecur]
      } else {
        this.$util.msg('已到达上限！')
      }
    },
    edit() {
      console.log(this.titlecur)
      this.$refs.editpop.open()
    },
    size() {
      this.$refs.Sizepop.open()
    },
    location() {
      this.$refs.locationpop.open()
    },
    time() {
      this.$refs.timepop.open()
    },
    style() {
      this.$refs.stylepop.open()
    },
    sureEdit() {
      console.log(this.titleList)
      if (!this.editobj.title) {
        return this.$util.msg('请输入标题！')
      }
      this.setconfig()
      this.$refs.editpop.close()
    },
    setconfig() {
      this.titleList[this.titlecur] = this.editobj
    },
    // 标题大小
    sizechange(value) {
      this.editobj.fontSize = value
    },
    //标题y轴位置
    topchange(value) {
      this.editobj.y = value
    },
    //标题x轴位置
    leftchange(value) {
      this.editobj.x = value
    },
    isAlignCenterChange(e) {
      this.editobj.isAlignCenter = e.detail.value
      this.editobj.x = 0
    },
    //标题时长
    timechange(value) {
      this.editobj.time = value
    },
    //描边粗细
    Strokechange(value) {
      this.editobj.outline = value
    },
    //文字内距
    bordchange(value) {
      this.editobj.bord = value
    },
    //圆角设置
    radiuschange(value) {
      this.editobj.radius = value
    },
    getColor() {},
    //修改颜色
    changeColor(item) {
      if (this.optcur === 0) {
        //文字颜色
        this.editobj.color = item
      } else if (this.optcur === 1) {
        //描边颜色
        this.editobj.outlineColor = item
        this.editobj.outline = 4
      } else {
        //背景颜色
        this.editobj.bordColor = item
        this.editobj.bord = 16
      }
    },
    //背景高度
    heightchange(value) {},
    sureSizepop() {
      this.setconfig()
      this.$refs.Sizepop.close()
    },
    changeStyle(item, index) {
      this.stylecur = index
      this.editobj.color = item.color
      this.editobj.outlineColor = item.outlineColor
      this.editobj.outline = item.outline
      this.editobj.bord = item.bord
      this.editobj.radius = item.radius
      this.editobj.bordColor = item.bordColor
    },
    surelocation() {
      this.setconfig()
      this.$refs.locationpop.close()
    },
    suretime() {
      this.setconfig()
      this.$refs.timepop.close()
    },
    surestyle() {
      this.setconfig()
      this.$refs.stylepop.close()
    },
    submit() {
      uni.$emit('titleStyle', this.titleList)
      console.log(this.titleList)
      uni.navigateBack()
    }
  }
}
</script>
<style lang="scss" scoped>
::-webkit-scrollbar {
  height: 0;
}

.bg-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;

  .bg-img {
    width: 100%;
    height: 1333rpx;
  }

  .title-box {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    z-index: 99;
    font-weight: 600;
    // max-width: 600rpx;
    white-space: nowrap;
    letter-spacing: 4rpx;
  }

  .strok {
    text-shadow: 4rpx 0 pink, -4rpx 0 pink, 0 4rpx pink, 0 -4rpx pink, 4rpx 4rpx pink, -4rpx -4rpx pink, 4rpx -4rpx pink, -4rpx 4rpx pink;
  }
}

.all-box {
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 9;
  width: 750rpx;
  background-color: #242424;

  .all-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 26rpx;
    border-bottom: 2rpx solid rgba(225, 225, 225, 0.2);

    .left-scroll {
      width: 540rpx;
      overflow-x: scroll;
      overflow-y: hidden;
      white-space: nowrap;
      height: 90rpx;

      .left-item {
        position: relative;
        display: inline-block;
        width: 90rpx !important;
        height: 90rpx;
        // overflow: hidden;
        margin-right: 60rpx;
        border-bottom: 5rpx solid #242424;
        text-align: center;
        line-height: 90rpx;
        color: #fff;
        opacity: 0.6;

        .delicon {
          position: absolute;
          right: -40rpx;
          top: 30rpx;
          // margin-left: 10rpx;
          width: 30rpx;
          height: 30rpx;
          z-index: 99;
        }
      }

      .act {
        border-bottom: 5rpx solid #fff;
        opacity: 1;
      }
    }

    .add-box {
      width: calc(100% - 540rpx);
      background-color: #242424;
      height: 90rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 30rpx;
      color: #ffffff;
      opacity: 0.6;
    }
  }

  .opt-box {
    padding: 42rpx 24rpx 42rpx 40rpx;

    .save-btn {
      width: 150rpx;
      height: 90rpx;
      background: #ffffff;
      border-radius: 10rpx;
      font-weight: 500;
      font-size: 30rpx;
      color: #000000;
      text-align: center;
      line-height: 90rpx;
    }
  }
}

.pop-box {
  width: 750rpx;
  background-color: #262626;
  border-radius: 20rpx 20rpx 0 0;

  .pop-top {
    height: 120rpx;
    padding: 0 30rpx;
    border-bottom: 1px solid rgba(225, 225, 225, 0.2);
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    font-size: 36rpx;
    color: #fff;
  }

  .pop-content {
    padding: 32rpx 0 40rpx;

    .textarea2 {
      width: 690rpx;
      height: 230rpx;
      background: #393a3c;
      border-radius: 20rpx;
      padding: 30rpx;
      box-sizing: border-box;
      margin: 0 auto;
      color: #fff;
    }

    .surebtn {
      width: 690rpx;
      height: 110rpx;
      background: #393a3c;
      box-shadow: 0rpx 20rpx 20rpx 0rpx rgba(26, 26, 26, 0.15);
      border-radius: 10rpx;
      font-weight: 600;
      font-size: 36rpx;
      color: #ffffff;
      text-align: center;
      line-height: 110rpx;
      margin: 38rpx auto 0;
    }
  }

  .timechoose {
    width: 164rpx;
    height: 60rpx;
    background: #393a3c;
    box-shadow: 0rpx 16rpx 16rpx 0rpx rgba(26, 26, 26, 0.15);
    border-radius: 8rpx;
    font-size: 30rpx;
    color: #ffffff;
    text-align: center;
    line-height: 64rpx;
  }

  .acttime {
    background-color: #eb5e00 !important;
  }

  .stylechoose-box {
    width: 1000rpx;
    display: flex;
    align-items: center;
    padding: 0 30rpx 32rpx 30rpx;
    border-bottom: 1px solid rgba(225, 225, 225, 0.2);
    color: #fff;
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
  }

  .styleImg {
    border: 4rpx solid transparent;
    box-sizing: border-box;
  }

  .actstyle {
    border: 4rpx solid #fff !important;
    border-radius: 12rpx;
  }

  .style-opt {
    width: 120rpx;
    height: 60rpx;
    border-radius: 30rpx;
    border: 2rpx solid #ffffff;
    opacity: 0.5;
    font-size: 30rpx;
    color: #ffffff;
    text-align: center;
    line-height: 60rpx;
    margin-right: 30rpx;
  }

  .style-act {
    opacity: 1;
  }

  .color-box {
    width: 1000rpx;
    display: flex;
    flex-wrap: nowrap;
    margin-top: 8rpx;
    padding: 0 30rpx;
    overflow-x: scroll;
    white-space: nowrap;

    .no_round {
      width: 80rpx;
      height: 80rpx;
      margin-right: 30rpx;
      border-radius: 40rpx;
    }

    .chooseNo {
      width: 72rpx !important;
      height: 72rpx !important;
      border: 4rpx solid #fff;
    }

    .noLine {
      border: 0;
    }

    .color-item {
      // display: inline-block;
      width: 80rpx;
      height: 80rpx;
      border-radius: 40rpx;
      margin-right: 30rpx;

      .mini-box {
        display: inline-block;
        width: 60rpx;
        height: 60rpx;
        border-radius: 30rpx;
        margin-top: 10rpx;
        margin-left: 10rpx;
      }
    }
  }

  .font-box {
    padding: 0 30rpx;
    margin-top: 40rpx;
    flex-wrap: wrap;
    gap: 22rpx;

    .font-item {
      width: 156rpx;
      height: 80rpx;
      background: #393a3c;
      border-radius: 20rpx;
      border: 2rpx solid #979797;

      image {
        height: 42rpx;
        width: 120rpx;
      }
    }
  }
}
</style>
